<template>
    <div class="">
        <!-- eventLimit 是否折叠事件 -->
        <FullCalendar class='demo-app-calendar' ref="fullCalendar" defaultView="dayGridMonth" :header="{
            left: '',
            center: ``,
            right: ''
        }" :plugins="calendarPlugins" :weekends="calendarWeekends" :events="calendarEventsList"
            @dateClick="handleDateClick" locale='zh-cn' @eventClick='eventClick' height='parent' :eventLimit='false'
            :editable='true' @datesRender="datesRender" :slotEventOverlap="false">
        </FullCalendar>
        <!-- :dayNamesShort='dayNamesShort' :dayNames='dayNamesShort' axisFormat='HH:mm' timeFormat='HH:mm' -->
        <!-- <Form v-if="formVisible" ref="Form" @refreshDataList="refreshDataList" /> -->
    </div>
</template>
<script>
// import {  List } from '@/api/extend/schedule'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap';
// import Form from './Form'
export default {
    props: {
        calendarEventsList: {
            type: Array,
            default: [],
        }
    },
    name: 'extend-schedule',
    components: {
        FullCalendar,
        // Form
    },
    data() {
        return {
            formVisible: false,
            calendarPlugins: [ // plugins must be defined in the JS
                dayGridPlugin,
                timeGridPlugin,
                bootstrapPlugin,
                interactionPlugin // needed for dateClick
            ],
            calendarWeekends: true,
            calendarEvents: [],
            buttonText: { month: "月", week: "周", day: "日", list: "日程" },
            dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            titleFormat: { year: 'numeric', month: '2-digit' },
            columnHeaderFormat: [
                'ddd',    // Mon
                'MM月dd日 ddd', // Mon 9/7
                'MM月dd日 ddd'  // Monday 9/7
            ],
            startTime: '',
            endTime: '',

        }
    },
    created() { },
    mounted() {
        let calendarApi = this.$refs.fullCalendar.getApi()
    },
    methods: {
        datesRender(calendar) {
            let view = calendar.view
            this.startTime = this.toDate(view.activeStart, "yyyy-MM-dd HH:mm")
            this.endTime = this.toDate(view.activeEnd, "yyyy-MM-dd HH:mm")
            this.initData(calendar)
        },
        listPrev() {
            let calendarApi = this.$refs.fullCalendar.getApi()
            calendarApi.prev()
        },
        listNext() {
            let calendarApi = this.$refs.fullCalendar.getApi()
            calendarApi.next()
        },
        handleDateClick(arg) {
            // let startTime = this.toDate(arg.date, "yyyy-MM-dd HH:00"),
            //     clickTime = this.toDate(arg.date, "yyyyMMdd"),
            //     currTime = this.toDate(new Date(), "yyyyMMdd");
            // if (clickTime < currTime) return
            // if (clickTime == currTime) {
            //     let thisDate = new Date();
            //     thisDate.setHours(thisDate.getHours() + 1);
            //     startTime = this.toDate(thisDate, "yyyy-MM-dd HH:00");
            // }
            // this.addOrUpdateHandle('', startTime)
            // this.addOrUpdateHandle('', new Date(startTime).getTime())
        },
        // 详情点击
        eventClick(data) {
            this.$emit('handleDetail', data.event.id, data.event.start)
            // if (this.toDate(data.event.start, "yyyyMMddHHmm") > this.toDate(new Date(), "yyyyMMddHHmm")) {
            //     this.addOrUpdateHandle(data.event.id)
            // }
        },
        initData() {
            // let query = {
            //   startTime: new Date(this.startTime).getTime(),
            //   endTime: new Date(this.endTime).getTime(),
            // }
            let query = {
                startTime: this.startTime,
                endTime: this.endTime,
            }
            // List(query).then(res => {
            //     this.calendarEvents = res.data.list.map(o => ({
            //         id: o.id,
            //         title: o.content,
            //         start: o.startTime,
            //         end: o.endTime,
            //         color: o.colour,
            //         editable: false,
            //         allDay: false
            //     }))
            // })
        },
        // 新增 / 修改
        addOrUpdateHandle(id, startTime) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.Form.init(id, startTime)
            })
        },
        refreshDataList() {
            this.formVisible = false
            this.initData()
        },

        toDate(v, format) {
            format = format ? format : "yyyy-MM-dd HH:mm"
            if (!v) return "";
            var d = v;
            if (typeof v === 'string') {
                if (v.indexOf("/Date(") > -1)
                    d = new Date(parseInt(v.replace("/Date(", "").replace(")/", ""), 10));
                else
                    d = new Date(Date.parse(v.replace(/-/g, "/").replace("T", " ").split(".")[0]));
            } else {
                d = new Date(v)
            }
            var o = {
                "M+": d.getMonth() + 1,
                "d+": d.getDate(),
                "h+": d.getHours(),
                "H+": d.getHours(),
                "m+": d.getMinutes(),
                "s+": d.getSeconds(),
                "q+": Math.floor((d.getMonth() + 3) / 3),
                "S": d.getMilliseconds()
            };
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        },
    }
}
</script>
<style lang='scss'>
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/bootstrap/main.css';


.Schedule-container {
    padding: 0;

    .fc-toolbar.fc-header-toolbar {
        padding: 10px;
        margin-bottom: 0;
    }

    .fc-button-primary {
        background-color: #1890ff;
        border-color: #1890ff;
        height: 32px;
        line-height: 32px;
        padding: 0 0.65em;
        font-size: 12px;
    }

    .fc-button-primary:not(:disabled):active,
    .fc-button-primary:not(:disabled).fc-button-active {
        background-color: #1682e6;
        border-color: #1682e6;
    }

    .fc-button .fc-icon {
        line-height: 16px;
    }

    .fc-unthemed th {
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: #909399;
        font-weight: normal;
        background: #f5f7fa;
    }

    .fc-center {
        color: #606266;
    }

    .fc-unthemed th,
    .fc-unthemed td,
    .fc-unthemed thead,
    .fc-unthemed tbody,
    .fc-unthemed .fc-divider,
    .fc-unthemed .fc-row,
    .fc-unthemed .fc-content,
    .fc-unthemed .fc-popover,
    .fc-unthemed .fc-list-view,
    .fc-unthemed .fc-list-heading td {
        border-color: #ebeef5;
        color: #606266;
    }
}
</style>